// create the context menu
    var menu = contextmenu([
	     {
	    	 label : 'Jquery : Document ready',
	    	 onclick : function(e){
	    		 editor_javascript.insert('$(function () {\n    \n});');
	    	 }
	     },
	     {
	    	 label : 'Jquery : HTML to component',
	    	 onclick : function(e){
	    		 editor_javascript.insert('$("#" + component.info.id).html( "htmlContent" );');
	    	 }
	     },
	     {
	    	 label : 'Jquery : CSS to component',
	    	 onclick : function(e){
	    		 editor_javascript.insert('$("#" + component.info.id).css( "cssContent" );');
	    	 }
	     },
	     {
	    	 hr: true
	     },
	     {
	    	 label : 'Design Studio : ID of component',
	    	 onclick : function(e){
	    		 editor_javascript.insert('component.info.id');
	    	 }
	     },
	     {
	    	 label : 'Design Studio : Get Property Value',
	    	 onclick : function(e){
	    		 editor_javascript.insert('getProperty( "propertyName" )');
	    	 }
	     },
	     {
	    	 label : 'Design Studio : Set Property Value',
	    	 onclick : function(e){
	    		 editor_javascript.insert('setProperty( "propertyName", "propertyValue" );');
	    	 }
	     },
	     {
	    	 label : 'Design Studio : Get Data',
	    	 onclick : function(e){
	    		 editor_javascript.insert('getData( "dataName" )');
	    	 }
	     },
	     {
	    	 label : 'Design Studio : Raise Event',
	    	 onclick : function(e){
	    		 editor_javascript.insert('var evtObject = {\n        propertyName : "propertyValue"\n    };\n    $("#" + component.info.id).trigger("DesignStudioEvent", evtObject);');
	    	 }
	     },
	     {
	    	 hr : true
	     },
	     {
	    	 label : 'TAFFY : Create database',
	    	 onclick : function(e){
	    		 editor_javascript.insert('var db = TAFFY( getData( "dataId" ) );');
	    	 }
	     },
	     {
	    	 label : 'TAFFY : Select',
	    	 onclick : function(e){
	    		 editor_javascript.insert('db().select( "columnName1", "columnName2" );');
	    	 }
	     },
	     {
	    	 label : 'TAFFY : Distinct',
	    	 onclick : function(e){
	    		 editor_javascript.insert('db().distinct( "columnName1", "columnName2" );');
	    	 }
	     },
	     {
	    	 label : 'TAFFY : Filter',
	    	 onclick : function(e){
	    		 editor_javascript.insert('db( { columName1 : ["filterValue1", "filterValue2"] } ).get();');
	    	 }
	     },
	     {
	    	 label : 'TAFFY : Filter & Select',
	    	 onclick : function(e){
	    		 editor_javascript.insert('db( { columName1 : ["filterValue1", "filterValue2"] } ).select( "columnName1", "columnName2" );');
	    	 }
	     },
	     {
	    	 hr : true
	     },
	     {
	    	 label : 'Utilities',
	    	 children : [
	    	      {
			    	 label : 'TAFFY : Display Column Names',
			    	 onclick : function(e){
			    		 editor_javascript.insert('var dataId = "test",\n    db = TAFFY( getData(dataId) ),\n    firstRecord = db().limit(1).get()[0],\n	   output = "name: "+dataId+"\\nlength: "+db().get().length+"\\n\\n";\n\n    for (var column in firstRecord) {\n        if (firstRecord.hasOwnProperty(column))\n            output += column + "\\n";\n        }\n    alert(output);');
			    	 }
			     }
	    	 ]
	     }
    ]);
    contextmenu.attach($("#editor_javascript"), menu);
    
    
    